<template>
	<s-layout navbar="custom1" :bgStyle="{ color: '#fff' }">
		<assNavbar :title="state.title" />
		<!-- 申请创客页面 -->
		<view class="content">
			<view class="ss-m-x-16 ss-m-y-20 bg-white ss-r-16">
				<view class="head-title ss-m-t-20 ss-m-l-20 creator">成为{{ state.title }}</view>
				<view class="ss-flex ss-row-between ss-col-center ss-m-r-16 height-100">
					<view class="ss-m-l-20"
						><text class="mi">*</text><text class="title">姓名</text></view
					>
					<view class="input_view ss-m-r-12">
						<uni-easyinput
							class="input"
							:disabled="state.disabled"
							:inputBorder="false"
							:placeholderStyle="placeholderStyle"
							v-model="state.form.user_name"
							placeholder="请输入姓名"
						></uni-easyinput>
					</view>
				</view>
				<view class="devision"></view>
				<view class="ss-flex ss-row-between ss-col-center ss-m-r-16 height-100">
					<view class="ss-m-l-20"
						><text class="mi">*</text><text class="title">身份证号</text></view
					>
					<view class="input_view ss-m-r-12">
						<uni-easyinput
							class="input"
							:inputBorder="false"
							:disabled="state.disabled"
							:placeholderStyle="placeholderStyle"
							v-model="state.form.id_card"
							placeholder="请输入身份证号"
						></uni-easyinput>
					</view>
				</view>
				<view class="devision"></view>
				<view class="ss-flex ss-row-between ss-col-center ss-m-r-16 height-100">
					<view class="ss-m-l-20"
						><text class="mi">*</text><text class="title">联系地址</text></view
					>
					<view class="input_view ss-m-r-12">
						<uni-easyinput
							class="input"
							:inputBorder="false"
							:disabled="state.disabled"
							:placeholderStyle="placeholderStyle"
							v-model="state.form.address"
							placeholder="请输入联系地址"
						></uni-easyinput>
					</view>
				</view>
				<view class="devision"></view>
				<view class="ss-flex ss-row-between ss-col-center ss-m-r-16 height-100 ss-p-r-10">
					<view class="ss-m-l-20"
						><text class="mi">*</text><text class="title">手机号码</text></view
					>
					<view class="input_view ss-m-r-12 ss-flex">
						<uni-easyinput
							class="input"
							:inputBorder="false"
							:disabled="state.disabled"
							:placeholderStyle="placeholderStyle"
							v-model="state.form.mobile"
							placeholder="请输入手机号码"
						></uni-easyinput>
					</view>
				</view>
			</view>
			<view class="ss-m-x-16 ss-r-16 ss-m-t-40">
				<view class="ss-m-l-20"
					><text class="mi">*</text><text class="title">上传身份证（正反面）</text></view
				>
				<view class="audit ss-flex ss-row-between ss-col-center">
					<view class="fornt-face ss-p-20 ss-p-r-10">
						<view class="blank-40"></view>
						<image
							@click="select(1)"
							:src="
								sheep.$url.cdn(
									state.form.card_front || '/storage/creator/card_front.png',
								)
							"
							mode="aspectFit"
							class="img"
						></image>
						<view class="audit-text ss-m-t-10">点击上传身份证原件人像面</view>
					</view>
					<view class="fornt-face ss-p-20 ss-p-r-10">
						<view class="blank-40"></view>
						<image
							@click="select(2)"
							:src="
								sheep.$url.cdn(
									state.form.card_back || '/storage/creator/card_back.png',
								)
							"
							mode="aspectFit"
							class="img"
						></image>
						<view class="audit-text ss-m-t-10">点击上传身份证原件国徽面</view>
					</view>
				</view>
			</view>
			<view class="blank"></view>
			<view class="next-btn" v-if="state.status == 2 || state.status === ''" @click="submit">{{state.status == 2 ? '修改':'提交'}}</view>
		</view>
	</s-layout>
</template>

<script setup>
	import assNavbar from '@/components/ass-navbar.vue';
	import { computed, reactive, onBeforeMount, ref } from 'vue';
	import { onLoad, onPullDownRefresh } from '@dcloudio/uni-app';
	import test from '@/sheep/helper/test.js';
	import sheep from '@/sheep';
	import { cloneDeep} from 'lodash';
	import serviceAPI from "@/sheep/api/service"
	import {chooseFile } from "@/sheep/utils"
	const placeholderStyle = 'color:#D4D4D4;font-size:30rpx;';

	const state = reactive({
		disabled:false,
		status:'',
		type: 1,
		role: 0,
		title: '指导员',
		form: {
			project: '',
			user_name: '',
			mobile: '',
			address: '',
			id_card: '',
			inviter_code: '',
			card_front: '',
			card_back: '',
		},
	});

	async function select (type){
		if(state.disabled)return
		let [file] = await chooseFile('image')
		if(!file){
			uni.showToast({
				title:'选择失败'
			})
		}
		let data = await sheep.$api.app.upload(file.url)
		if(!data){
			uni.showToast({
				title:'上传失败'
			})
		}
		if (type == 1) {
			state.form.card_front = data.path;
		} else {
			state.form.card_back = data.path;
		}
	};

	/******************************表单提交********************/

	const submit = () => {

		var title = '';
		if (state.form.user_name.length == 0) {
			title = '请填写姓名';
		} else if (!test.idCard(state.form.id_card)) {
			title = '请检查身份证号是否正确';
		} else if (state.form.address.length == 0) {
			title = '请填写联系地址';
		} else if (state.form.card_front.length == 0) {
			title = '请上传身份证正面照片';
		} else if (!test.mobile(state.form.mobile)) {
			title = '请检查手机号是否正确';
		} else if (state.form.card_back.length == 0) {
			title = '请上传身份证反面照片';
		} else if (state.form.card_front.length == 0) {
			title = '请上传身份证正面照片';
		}

		if (title.length > 0) {
			uni.showToast({
				title: title,
				icon: 'none',
				duration: 1000,
			});

			return false;
		}

		successHandle();
	};

	/******************************表单提交********************/

	const successHandle = async (e) => {
		let { error, data, msg } = await serviceAPI[state.status == 2 ?'setApply':'addApply'](cloneDeep(state.form));
		if (error == 0) {
			uni.showToast({
				title: '提交成功',
				icon: 'none',
				mask:true,
			});
			setTimeout(()=>{
				sheep.$router.back()
			}, 1500);
		} else {
			uni.showToast({
				title: msg,
				icon: 'none',
				duration: 800,
			});
		}
	};
	async function queryState(){
		let {error ,data} = await sheep.$api.service.queryApply({
			project:state.form.project
		})
		if(error == 0 && data.data.length){
			state.form = data.data[0]
			state.status = data.data[0].status
			delete state.form.status
			if(state.status == 2){
				state.disabled = false
			}else{
				state.disabled = true
			}
		}
	}
	onLoad((e) => {
		state.form.inviter_code = e?.invite_code || '';
		state.status = e?.status || '';
		if (e.role) {
			state.role = e.role;
			switch (state.role) {
				case '0':
					state.title = '指导员';
					state.form.project = 'zdy';
					break;
				case '1':
					state.title = '教导员';
					state.form.project = 'jdy';
					break;
				case '2':
					state.title = '督导';
					state.form.project = 'dd';
					break;
			}
		}
		if(state.status !== ''){
			queryState()
		}
	});
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.content {
		width: 100vw;
	}

	.height-100 {
		height: 100rpx;
	}

	.blank {
		height: 20rpx;
	}

	.mi {
		color: #ff0000;
	}

	.blank {
		height: 120rpx;
		width: 100%;
		background-color: #ffffff;
	}

	.creator {
		font-family: Source Han Sans;
		font-size: 32rpx;
		font-weight: 700;
		line-height: 48rpx;
		letter-spacing: 0px;
		color: #323233;
	}

	.title {
		font-family: Source Han Sans;
		font-size: 30rpx;
		font-weight: normal;
		line-height: 28rpx;
		letter-spacing: 1rpx;
	}

	.devision {
		background-color: #f1f1f1;
		margin-left: 20rpx;
		margin-right: 20rpx;
		height: 1rpx;
	}

	::v-deep .uni-easyinput__content {
		text-align: right;
	}

	.img {
		width: 300rpx;
		height: 180rpx;
	}

	.audit-text {
		font-family: Source Han Sans;
		font-size: 24rpx;
		font-weight: normal;
		line-height: 32rpx;
		letter-spacing: 0px;
	}

	.agreement {
		width: 20rpx;
		height: 20rpx;
	}

	.blank-40 {
		height: 40rpx;
	}

	.bg_D8 {
		background: #d8d8d8;
	}
	.height-400 {
		height: 500rpx;
	}

	.read {
		font-family: Source Han Sans;
		font-size: 20rpx;
		font-weight: normal;
		line-height: 28rpx;
		letter-spacing: 1px;
		font-feature-settings: 'kern' on;
		color: #3d3d3d;
	}

	.next-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		bottom: calc(env(safe-area-inset-bottom) + 35rpx);
		left: 30rpx;
		right: 30rpx;
		width: calc(100% - 60rpx);
		font-family: Source Han Sans;
		font-size: 32rpx;
		height: 100rpx;
		border-radius: 50rpx;
		background: #003288;
		color: #ffffff;
	}
</style>
